<template>
  <div class="courseList">
    <div style="height: 50px;line-height: 50px;">
      <el-button type="primary" style="float: left"><i class="el-icon-circle-plus-outline el-icon--leftt"></i>新增</el-button>
      <el-button style="float: right"><i class="el-icon-download el-icon--leftt"></i>批量下架</el-button>
      <el-button style="float: right"><i class="el-icon-upload2 el-icon--leftt"></i>批量上架</el-button>
      <el-button style="float: right"><i class="el-icon-delete el-icon--leftt"></i>批量删除</el-button>
    </div>
    <div style="background-color: #ffffff">
      <table>
        <tbody>
        <tr v-for="d in list" :key="d.id">
          <td style="width: 70px;text-align: center">
            <el-checkbox v-model="d.checked"></el-checkbox>
          </td>
          <td style="width: 130px;text-align: center">
            <div class="courselist-face">
              <div
                style='background-image: url("http://mego-haina.oss-cn-hangzhou.aliyuncs.com/upload/default/201104153048370.jpg")'></div>
            </div>
          </td>
          <td style="text-align: left">
            <div class="courselist-name">
              {{d.courseName}}<i v-if="d.isRelease==1">已上架</i>
            </div>
            <div class="info" style="margin-bottom: 10px" v-html="d.summary"></div>
            <div class="courselist-label">
              <span v-for="label in d.labelList">{{label}}</span>
            </div>
            <div class="courseList-cate">{{d.courseCateName}}</div>
            <div class="courseList-time">更新于：{{formatDate(d.createTime,'yyyy-MM-dd hh:mm')}}</div>
          </td>
          <td class="courseList-btn">
            <span v-for="n in fnList" :key="n.key" @click="n.fn(d)" :class="n.class" v-if="d[n.judge] == n.judgeShow">{{n.name}}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {timeGMTToString} from '@/utils/datetime'

  export default {
    name: "CourseTable",
    props: ['list', 'fnList'],
    methods: {
      formatDate(date, format) {
        return timeGMTToString(date, format)
      }
    }

  }
</script>

<style lang="scss" scoped>
  table{
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #fff;
    color: #666;
    tr:hover {
      background-color: #f6f8fa;
    }
    th {
      position: relative;
      padding: 9px 15px;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
    }
    td{
      padding: 25px 0;
      border: none;
      border: 0;
      border-bottom: solid 1px #eeeeee;
      margin: 0;
    }
  }
  .courseList {
    margin: 0 9px;
    .layui-table td {
      padding: 25px 0;
    }
    .courselist-face {
      width: 110px;
      height: 135px;
      box-shadow: #ccc 0px 0px 10px;
      overflow: hidden;
      border-radius: 6px;
      display: inline-block;
        div {
          height: 100%;
          background: center center no-repeat;
          background-size: cover;
        }
    }

    .courselist-face.noimg {
      box-sizing: border-box;
      border: 1px solid #ccc;
        div {
          background-size: 80% auto;
        }
    }

    .courselist-name {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
        i {
          height: 20px;
          line-height: 20px;
          display: inline-block;
          padding: 0 5px;
          font-size: 12px;
          background-color: #d8eafe;
          color: #0f77fe;
          border-radius: 2px;
          font-style: normal;
          position: relative;
          top: -2px;
          margin-left: 10px;
        }
    }

    .courselist-label > span {
      display: inline-block;
      margin-right: 5px;
      background-color: #ebeef1;
      border-radius: 2px;
      font-size: 12px;
      padding: 0 5px;
    }

    .courselist-label-close {
      font-style: normal;
    }

    .courseList-cate {
      color: #2a75ed;
      font-size: 14px;
      margin: 5px 0;
    }

    .courseList-time {
      color: #999;
      font-size: 12px;
    }

    .courseList-btn{
      vertical-align: top;
      span {
        display: inline-block;
        margin-right: 8px;
        font-size: 12px;
        min-width: 50px;
        box-sizing: border-box;
        text-align: center;
        padding: 2px 10px;
        background-color: #f0f0f0;
        border-radius: 3px;
        cursor: pointer;
      }
      span.btn-normal {
        color: #2a75ed;
      }
      span.btn-danger {
        color: #911b12;
      }
    }
  }
</style>
